import Layer from "../../../common/cmpt/base/Layer";
import { EventName } from "../../../common/const/EventName";
import Events from "../../../common/util/Events";
import { LyTools } from "../../../common/util/LyTools";


const { ccclass, property } = cc._decorator;
/**
 * 三阶贝塞尔曲线组，可添加多组
 */
@ccclass
export default class ThirdOrderBezierGrp extends cc.Component {
    @property({
        tooltip: '是否指定固定初始节点'
    })
    isFixedStartPoint: boolean = false
    @property({
        type: cc.Node,
        visible() {
            return this.isFixedStartPoint
        }
    })
    startNode: cc.Node = null;
    @property({
        tooltip: CC_DEV && "分组数量"
    })
    grpNum: number = 3
    // onLoad () {}
    startPoint: cc.Node = null
    drawGraphics: cc.Graphics = null;
    private _pointsGrp: cc.Node[][] = []
    get pointsGrp() {
        return this._pointsGrp
    }
    set pointsGrp(any) {
        this._pointsGrp = any
    }

    start() {
    }

    protected onDestroy(): void {
        Events.off(EventName.BEZIER_DRAW, this.restartDraw, this)
    }

    init() {
        this.createStartPoint()
        this.createDrawNode()
        for (let i = 0; i < this.grpNum; i++) {
            this.createPoint()
        }
        this.restartDraw()
        Events.on(EventName.BEZIER_DRAW, this.restartDraw, this)
    }
    /**
     * 创建初始点或者用自带固定点
     */
    createStartPoint() {
        let point = this.isFixedStartPoint ? this.startNode : LyTools.createPureColorNode('starPoint', cc.color(100, 0, 100, 255), cc.v2(80, 80))
        point.active = true
        point.parent = this.node
        point.setPosition(0, 0)
        point.on(cc.Node.EventType.TOUCH_MOVE, function (event) {
            this.opacity = 100;
            var delta = event.touch.getDelta();
            this.x += delta.x;
            this.y += delta.y;
        }, point);
        point.on(cc.Node.EventType.TOUCH_END, function () {
            this.opacity = 255;
            // let eventTarget = new cc.Event.EventCustom("restartDraw", true);
            // this.dispatchEvent(eventTarget);
            Events.emit(EventName.BEZIER_DRAW)
        }, point);
        this.startPoint = point
    }
    /**
     * 创建画布
     */
    createDrawNode() {
        let draw = new cc.Node('graphics')
        draw.parent = this.node
        draw.addComponent(cc.Graphics)
        this.drawGraphics = draw.getComponent(cc.Graphics)
        this.drawGraphics.clear();
        this.drawGraphics.lineWidth = 6;
        this.drawGraphics.strokeColor = cc.Color.GREEN;
    }

    createPoint() {
        this.pointsGrp.push([])
        for (let i = 0; i < 3; i++) {
            let item = new cc.Node(`Ctl${i}`)
            item.parent = this.node;
            if (i < 3) {
                item.setPosition(100 * i, this.pointsGrp.length * 100)
            }
            if (i < 2) {
                item.addComponent(cc.Sprite).spriteFrame = LyTools.createSpriteFrame(cc.color(0, 0, 0, 255), new cc.Vec4(0, 0, 50, 50));
            } else {
                item.addComponent(cc.Sprite).spriteFrame = LyTools.createSpriteFrame(cc.color(255, 0, 0, 255), new cc.Vec4(0, 0, 50, 50));
            }
            item.on(cc.Node.EventType.TOUCH_MOVE, function (event) {
                this.opacity = 100;
                var delta = event.touch.getDelta();
                this.x += delta.x;
                this.y += delta.y;
            }, item);
            item.on(cc.Node.EventType.TOUCH_END, function () {
                this.opacity = 255;
                // let eventTarget = new cc.Event.EventCustom("restartDraw", true);
                // this.dispatchEvent(eventTarget);
                Events.emit(EventName.BEZIER_DRAW)
            }, item);
            let grpLen = this.pointsGrp.length
            this.pointsGrp[grpLen - 1].push(item)
        }
    }
    /**重新绘制 */
    restartDraw() {
        this.drawGraphics.clear();
        let startPos = this.startPoint.getPosition()
        this.drawGraphics.moveTo(startPos.x, startPos.y);
        for (let i = 0; i < this.pointsGrp.length; i++) {
            this.drawGraphics.bezierCurveTo(this.pointsGrp[i][0].x, this.pointsGrp[i][0].y, this.pointsGrp[i][1].x, this.pointsGrp[i][1].y, this.pointsGrp[i][2].x, this.pointsGrp[i][2].y)
        }
        this.drawGraphics.stroke();
    }
    //获取数组
    getPointsGrp() {
        return this.pointsGrp
    }
    /**减少一组 */
    delateOneGrp() {
        if (this.pointsGrp.length) {
            this.grpNum-=1
            let grp = this.pointsGrp.splice(this.pointsGrp.length - 1, 1)[0]
            for (let i = 0; i < grp.length; i++) {
                grp[i].removeFromParent()
            }
            this.restartDraw()
        }else{
            Layer.inst.showTip({ text: `都木有了`, end: cc.v2(0, 100), duration: 0.2 })
        }
    }

    /**增加一组 */
    addOneGrp(){
        this.grpNum+=1
        this.createPoint()
        this.restartDraw()
    }

}
